<template>
	<view>		
		<uni-swipe-action class="list padding padding-top-xs">
			<uni-swipe-action-item class="margin-top-sm" :options="options" @click="onClick($event, i.id)" @change="change" v-for="i in list" :key="i.id">
				<view class="oil-card flex justify-between align-center padding-lr text-white" :class="[i.type=='中国石化'?'card1':'card2']" @click="$goto('/pages/mine/oilcard-add?id='+i.id)">
					<image style="width: 90rpx;height: 90rpx;" :src="i.type=='中国石化'?'../../static/images/oilcd1.png':'../../static/images/oilcd2.png'"></image>
					<view class="info">
						<view class="text-lg">{{i.type}}</view>
						<view class="text-lg margin-top-xs">{{i.card_no}}</view>
					</view>
				</view>
			</uni-swipe-action-item>
			
			<view class="oil-card margin-top flex justify-center align-center padding-lr text-white card3" @click="$goto('/pages/mine/oilcard-add')">
				<image style="width: 60rpx; height: 60rpx;display: block;" src="../../static/images/add.png" mode=""></image>
				<view class="margin-left-xs text-xl">添加油卡</view>
			</view>
		</uni-swipe-action>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				list: []
			};
		},
		onShow() {
			this.getData();
		},
		methods: {
			onClick(e, id) {
				if (e.content.text=='删除') {
					this.$u.delete('/card/oil', {
						id: id
					}).then(res => {
						this.getData();
					})
				}
			},
			change(open) {
				console.log('当前开启状态：' + open)
			},
			getData() {
				this.$u.get('/card/oil').then(res => {
					this.list = res.data.result.oil_card
				})
			}
		}
	}
</script>

<style lang="scss">
	.oil-card {
		height: 131rpx;
		background: rgba(238, 85, 68, 1);
		border-radius: 10rpx;
		background-size: 100% 100%;
		width: 100%;

		&.card1 {
			background-image: url(../../static/images/oc1.png);
		}

		&.card2 {
			background-image: url(../../static/images/oc2.png);
		}

		&.card3 {
			background-color: #8F8F8F;
		}

		.info {
			display: flex;
			flex-flow: column;
			align-items: flex-end;
			letter-spacing: 4rpx;
		}
	}
</style>
